<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <p>全名为：{{ person.fullName }}</p>
  <br />
  修改全名：<input type="text" v-model.lazy="person.fullName" />
</template>
<script>
// Vue3特点为组合型API，所以要使用computed需要引入
import { reactive, computed } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    // 数据
    const person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 计算属性——简写（只读）
    // let fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });

    // 计算属性完整写法
    person.fullName = computed({
      get() {
        console.log("fullName 的 getter触发");
        return person.firstName + "-" + person.lastName;
      },
      set(newVal) {
        console.log("fullName 的 setter触发");
        let nameArr = newVal.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });

    // 返回一个对象供模版使用
    return {
      person
    };
  },
  // 可以直接使用Vue2的计算属性配置，但在Vue3中不建议使用
  // computed: {
  //   fullName(){
  //     return this.person.firstName +'-'+ this.person.lastName
  //   }
  // },
};
</script>

